<template>
  <view
    class="option"
    :class="{ active: active }"
    @tap="onSelect"
    :style="{
      'min-width': tWidth + 'px',
      'max-width': cWidth + 'px',
      width: (pScale || option.scale) ? (cWidth + 'px') : (tWidth + 'px')
    }"
  >
    <view class="text">{{ text }}</view>
  </view>
</template>

<script lang="ts">
export default {
  props: {
    pScale: {
      default: false
    },
    option: {
      default: () => {
        return {}
      }
    },
    text: {
      default: ''
    },
    cWidth: {
      default: () => {
        return uni.upx2px(686)
      }
    },
    tWidth: {
      default: () => {
        return uni.upx2px(333)
      }
    },
    active: {
      default: false
    }
  },
  computed: {
    pWidth() {
      return this.tWidth - uni.upx2px(64)
    }
  },
  watch: {
    text: {
      handler() {
        this.$nextTick(() => {
          const query = uni.createSelectorQuery().in(this)
          query
            .select('.text')
            .boundingClientRect((data) => {
              if (parseInt(data.width) >= parseInt(this.pWidth)) {
                // this.option.scale = true
                this.$emit('scale', true)
              } else {
                // this.option.scale = false
                this.$emit('scale', false)
              }
            })
            .exec()
        })
      },
      immediate: true
    }
  },
  data() {
    return {
      scale: false
    }
  },
  methods: {
    onSelect() {
      this.$emit('select')
    }
  }
}
</script>

<style lang="scss" scoped>
.option {
  box-sizing: border-box;
  background: #fafafa;
  padding: 16rpx 30rpx;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  border: 1rpx solid #fafafa;
  font-weight: 400;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  color: #222222;
  .text {
    width: max-content;
    max-width: 100%;
    line-height: 40rpx;
    word-break: break-all;
  }
}
.active {
  background: #f2fdfb;
  border: 1rpx solid #00d1b6;
  transform: rotateZ(360deg);
  color: #00d1b6;
  font-weight: 700;
}
</style>